<template>
    <div class="editMerchantBox" v-loading="loading">
        <el-form ref="form">
            <!-- :model="form" -->

            <el-form-item label="密码">
                <el-input v-model="password" placeholder="修改密码则填写，不修改则不填写" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="联系电话">
                <el-input v-model="initial_data.contact" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="电话号码">
                <el-input v-model="initial_data.mobile" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="服务">
                <el-select multiple v-model="storeDevices" style="width:300px" placeholder="请选择">
                    <el-option
                            v-for="item in devicesList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="人均消费" v-if="visible">
                <el-input v-model="initial_data.per_capita" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="是否支持外卖" v-if="visible">
                <el-radio-group v-model="initial_data.take_out">
                    <el-radio :label="1" value="1">是</el-radio>
                    <el-radio :label="0" value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="配送费" v-if="visible">
                <el-input v-model="initial_data.delivery_fee" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="起送价格" v-if="visible">
                <el-input v-model="initial_data.init_delivery_price" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="是否需要排队" v-if="visible">
                <el-radio-group v-model="initial_data.is_lineup">
                    <el-radio :label="1" value="1">是</el-radio>
                    <el-radio :label="0" value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否支持预定" v-if="visible">
                <el-radio-group v-model="initial_data.is_book">
                    <el-radio :label="1" value="1">是</el-radio>
                    <el-radio :label="0" value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="商户介绍">
                <el-input type="textarea"  :rows="10" v-model="initial_data.introduce" style="width:500px;"></el-input>
            </el-form-item>

            <el-form-item label="营业时间" class="timeBox">
                <el-form-item label="上午">
                    <el-time-select
                            placeholder="起始时间"
                            v-model="time_am_start"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                    —
                    <el-time-select
                            placeholder="结束时间"
                            v-model="time_am_end"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="下午">
                    <el-time-select
                            placeholder="起始时间"
                            v-model="time_pm_start"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                    —
                    <el-time-select
                            placeholder="结束时间"
                            v-model="time_pm_end"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                </el-form-item>
            </el-form-item>
        </el-form>

        <div class="picUpload" style="display:flex;flex-direction:row">

            <div>
                <div>
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action=""
                            list-type="picture-card"
                            name="logo"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="logoVisible"
                            :fullscreen="true">
                        <img alt="" class="" :src="initial_data.logo" v-show="logoVisible">
                        <span class="hoverBox" @click="logoVisible=false" v-show="logoVisible">
							<span class="deleteIcon">
								<i class="el-icon-delete"></i>
							</span>
						</span>

                    </el-dialog>
                </div>
                <span class="title">商户logo</span>
            </div>

        </div>

        <div class="submitBtnBox">
            <el-button class="submitBtn" @click="submitFn" type="primary">保存</el-button>
        </div>

    </div>

</template>

<script>
    import TreeSelect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    export default {
        name: 'edit-merchant',
        components: {TreeSelect},
        data() {
            return {
                tagData: [],
                tagList: [],
                initial_data: {},//获取初始数据
                time_am_start: '',
                time_am_end: '',
                time_pm_start: '',
                time_pm_end: '',
                businessLicenseVisible: true,
                foodSafetyVisible: true,
                logoVisible: true,
                loading: false,
                classifyList: [],
                typeList: [],
                addrOptions: [],
                take_out: 1,
                defaultProps: {
                    value: 'id',          // 唯一标识
                    label: 'name',       // 标签显示
                    children: 'children', // 子级
                },
                visible: true,
                password: '',
                devicesList: [], //服务列表
                storeDevices: []
            }
        },
        created() {

        },
        computed: {
            submitObj() {
                return {
                    password: this.password,
                    init_delivery_price: this.initial_data.init_delivery_price,
                    is_lineup: this.initial_data.is_lineup, //是否需要排队
                    is_book: this.initial_data.is_book, //是否支持预定
                    delivery_fee: this.initial_data.delivery_fee, //配送费
                    mobile: this.initial_data.mobile,  //手机
                    contact: this.initial_data.contact, //联系电话
                    id: localStorage.getItem('user_store_id'),
                    token: localStorage.getItem('user_token'),//token
                    logo: this.initial_data.logo,//商户logo
                    am: this.time_am_start + '-' + this.time_am_end,//早上营业时间
                    pm: this.time_pm_start + '-' + this.time_pm_end,//下午营业时间
                    introduce: this.initial_data.introduce,//商户介绍
                    per_capita: this.initial_data.per_capita,//人均消费
                    take_out: this.initial_data.take_out,//是否支持外卖
                }
            }
        },
        watch: {},
        methods: {
            //初始数据
            defaultFn() {
                this.loading = true;
                this.$http.get('/web/store/info', {
                    params: {
                        'token': localStorage.getItem('user_token'),
                        'store_id': localStorage.getItem('user_store_id')
                    }
                }).then((response) => {
                    if (response.data.status === 'success') {
                        if (response.data.data.status === 1) {
                            this.$router.push({name: 'settingReview'})
                        }

                        if (response.data.data.status === 3) {
                            this.$message.warning('您的提交的信息被驳回，请尽快修改您的信息')
                        }
                        this.initial_data = response.data.data;

                        this.time_am_start = this.initial_data.am.split('-')[0];
                        this.time_am_end = this.initial_data.am.split('-')[1];
                        this.time_pm_start = this.initial_data.pm.split('-')[0];
                        this.time_pm_end = this.initial_data.pm.split('-')[1];

                        for (var i = 0; i < this.tagList.length; i++){
                            for (var l = 0; l < this.initial_data.tag.length; l++) {
                                if (this.tagList[i].id === this.initial_data.tag[l]){
                                    this.tagData.push({
                                        id: this.initial_data.tag[l],
                                        tag_name: this.tagList[i].tag_name
                                    })
                                }
                            }
                        }

                        this.getClassifyFn(this.initial_data.store_type_id)
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                })
            },
            //上传图片:folder是传给服务的文件名,用作图片分类
            handlePictureCardPreview(file) {
                let imageFile = file.file;
                let formData = new FormData();
                formData.append("image", imageFile);
                formData.append("action", file.filename);
                this.loading = true;
                this.$http.post('/api/tool/ali/upload/image', formData).then((response) => {
                    this.submitObj.logo = response.data.data;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },

            //获取服务列表
            getDevicesList(){
                this.loading = true;
                this.$http.get('/web/store/devices/list', {
                    params:{
                        token: localStorage.getItem('user_token'),
                        pageSize: 999
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.devicesList = response.data.data.list;
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            //获取商户服务
            getStoreDevicesList(){
                this.loading = true;
                this.$http.get('/store/devices/list',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        pageSize: 999,
                        store_id: localStorage.getItem('user_store_id')
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.storeDevices = [];
                        response.data.data.list.forEach((value) => {
                            this.storeDevices.push(value.name)
                        });
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            //提交内容
            submitFn() {
                this.loading = true;
                if (this.storeDevices.length > 0) {
                    this.submitObj.devices = this.storeDevices;
                }
                this.$http.post('/web/store/update/basic', this.submitObj).then((response) => {
                    if (response.data.status === 'success') {
                        this.$message({
                            message: '修改成功',
                            duration: 6000
                        });
                        this.defaultFn()
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                })
            },
        },
        mounted() {
            this.defaultFn();
            this.getDevicesList();
            this.getStoreDevicesList();
        }
    }
</script>

<style scoped lang="scss">
    @import './merchant-manage.scss';

</style>
